<template>
  <div class="ele-category">
    <el-tabs
      v-model="activeName1"
      :tab-position="tabPosition"
      class="ele-category-w"
    >
      <template v-for="item in tableStudent">
        <el-tab-pane :name="item.id" :label="item.name">
          <template v-if="activeName1 == item.id">
            <el-tabs
              v-model="activeName"
              :tab-position="tabPosition"
              class="demo-tabs"
            >
              <el-tab-pane label="抄表" name="抄表">
                <MeterReading
                  v-if="activeName == '抄表'"
                  :currentData="item"
                ></MeterReading>
              </el-tab-pane>
              <el-tab-pane label="核收" name="核收">
                <Collection
                  v-if="activeName == '核收'"
                  :currentData="item"
                ></Collection>
              </el-tab-pane>
            </el-tabs>
          </template>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import MeterReading from "./components/meterReading.vue";
import Collection from "./components/collection.vue";
import { lineLossData } from "@/gm/meterLabel.js";
import { useAppStore } from "@/stores";
import { storeToRefs } from "pinia";

const useApp = useAppStore();
let { tableStudent, monthMeterReading } = storeToRefs(useApp);

const tabPosition = ref("left");
const activeName = ref("抄表");
const activeName1 = ref();
// console.log("tableStudent", tableStudent.value);
const tableData = lineLossData;
const radio = ref(1);
onMounted(() => {
  if (tableStudent.value[0]) {
    activeName1.value = tableStudent.value[0].id;
  }
});
</script>

<style lang="scss" scoped>
//功率源
.line-Loss {
  .ll-control {
    margin-top: 10px;
    border: 1px solid #ebeef5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .ll-control-item {
      display: flex;
      .ll-group {
        display: flex;
        flex-direction: column;
      }
      .item2,
      .item3 {
        p {
          display: flex;
          padding: 5px 0px;
          .el-input {
            width: 100px;
          }
        }
      }
      .el-button {
        width: 100px;
      }
      .item2 {
        .el-button {
          width: 50px;
        }
      }
    }
    .ll-item2 {
      width: 700px;
      justify-content: space-evenly;
      align-items: center;
    }
  }
}
</style>
